<template>
	<view class="bigView">
		<view class="topView" v-if="Object.keys(result).length>0">
			<view class="title">{{result.theme}}</view>
			<view class="subTitle">{{result.updatedAtView+' '}}由{{result.updatedByName}}发布</view>
			<!-- <div v-html="result.content" class="htmlView"></div> -->
			<u-parse class="htmlView" :content="result.content" :lazyLoad="true"></u-parse>
			<view style="width: 100vw;min-height: 80px;" v-if="clubUserList.length>0">
				<view style="font-size: 16px;font-weight: bold;color: #000000;margin-left: 8px;margin-top: 8px;">报名人数：</view>
				<view style="width: 100vw;align-items: center;display: flex;flex-direction: row;">
					<view style="flex: 1;display: flex;flex-direction: row;flex-wrap: wrap; align-content: flex-start;">
						<view v-for="(item,index) in clubUserList" :key="index" @click="itemHandle(index)" style="display: flex;flex-direction: row;margin-left: 8px;margin-top: 8px;align-items: center;">
							<image :src="item.isSelect?'/static/img/login_ic_select_sel.png':'/static/img/login_ic_select_nor.png'" style="width: 20px;height: 20px;"/>
							<view style="margin-left: 5px;font-size: 16px;">{{item.userName}}</view>
						</view>
					</view>
					<view class="ffPoints" @click="addRuleSettings">发放积分</view>
				</view>
			</view>
		</view>
		<view class="bottomView" :style="[{height:bottom + 'px'}]" v-if="isExpired && Object.keys(result).length>0">
			<view class="sure" @click="sureHandle">我要报名</view>
		</view>
	</view>
</template>

<script>
	import { data } from '../../../uni_modules/uview-ui/libs/mixin/mixin';
import { isTimeExpired } from '../../../utils/auth';
	import club from '@/api/club.js'
	export default{
		components:{
			
		},
		data(){
			return {
				clubType:0,
				bottom:0,
				currentId:'',
				result:{},
				userInfo:{},
				isExpired:false,
				htmlValue:'',
				clubUserList:[]
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
			
			
		},
		onLoad(options) {
			if(options.id){
				this.currentId = options.id;
				this.queryByIdRequest()
			}
			this.$nextTick(() =>{
				this.initUserInfo()
			})
		},
		methods:{
			itemHandle(index){
				this.clubUserList[index]['isSelect'] = !this.clubUserList[index]['isSelect'];
			},
			addRuleSettings(){
				let dataList = []
				for(let i=0;i<this.clubUserList.length;i++){
					const item = this.clubUserList[i]
					if(item.isSelect){
						dataList.push(item)
					}
				}
				if(dataList.length==0){
					uni.showToast({
						icon:'none',
						title:"请选择用户"
					})
					return
				}
				uni.showLoading({
					title:'正在发放...'
				})
				
				club.clubAddUserRuleSettings({
					clubUserDtoList: dataList
				}).then(res =>{
					uni.hideLoading()
					uni.showToast({
						title: '操作成功'
					})
					this.queryByIdRequest()
				}).catch(error =>{
					
				})
			},
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo)
				}
			},
			click(item) {
				this.clubType = item.index;
				this.queryByIdRequest()
			},
			queryByIdRequest(){
				this.result = {}
				club.queryById({id:this.currentId}).then(res =>{
					this.result = res;
					this.clubUserList = [];
					if(this.result.clubUserList){
						for(let i=0;i<this.result.clubUserList.length;i++){
							// this.result.clubUserList[i]['isSelect'] = '0';
							let item = this.result.clubUserList[i]
							this.clubUserList.push({
								clubId:item.clubId,
								userId:item.userId,
								userName:item.userName,
								isSelect: false,
							})
						}
					}
					console.log(this.clubUserList)
					this.htmlValue = this.result.content;
					this.isExpired = isTimeExpired(this.result.deadline)
				})
			},
			scrolltolower() {
				// this.loadmore()
			},
			sureHandle(){
				// uni.navigateBack()
				uni.showLoading({
					title:'报名中，请稍等...'
				})
				club.clubRegistrationHandle({
					userId: this.userInfo.id,
					id:this.result.id,
					clubType:this.clubType,
				}).then(res =>{
					uni.hideLoading()
					uni.showToast({
						title: '操作成功'
					})
				}).catch(error =>{
					
				})
			}
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.ffPoints{
		background-color: #247BFD;
		width: 80px;
		height: 40px;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		border-radius: 20px;
		font-size: 14px;
	}
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
}
.topView{
	flex-grow: 1;
	// width: 100vw;
	// background-color: green;
	display: flex;
	flex-direction: column;
	width: 100vw;
	overflow-y: auto;
	// justify-content: center;
	.title{
		font-size: 20px;
		color: #000000;
		margin-top: 24px;
		margin-left: 16px;
	}
	.subTitle{
		font-size: 12px;
		color: #7E7E7E;
		margin-top: 8px;
		margin-left: 16px;
		line-height: 1.5;
	}
}
.htmlView{
	margin-top: 10px;
	// margin-left: 12px;
	padding: 20px;
}
.u-tabs__nav {
  justify-content: center; /* 使标签居中 */
}
.u-tabs__item {
  flex: 1; /* 让每个标签项均分空间 */
}
.bottomView{
	height: 150px;
	width: 100vw;
	background-color: white;
	display: flex;
	justify-content: center;
	.sure{
		width: calc(100vw - 32px);//calc(100vw-#{32px});
		height: 48px;
		border-radius: 24px;
		background-color: #247BFD;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 6px;
		color: white;
	}
}

table, td, th {
  border-color: #ddd;
  border-width: 1px;
  border-style: solid;
}
</style>